<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		input,button{
			height: 50px;
			border-radius: 6px;

		}
		input{
			width: 260px;
			padding-left: 8px;
			border: 1px solid grey;
		}
		button{
			width: 80px;
			font-size: 15PX;
			border: 0px;
			color: #FFFFFF;
		}
		#find{
			background-color: darkorange;
		}
		#add{
			background-color:lightgreen;
		}
		table{
			width: 90%;
			text-align: center;
		}
		table tr:hover{
			background-color: antiquewhite;
		}
		#addUserInfoDialog{
			display: none;
			width: 600px;
			height: 400px;
			background-color: #FFFFFF;
			box-shadow: 6px 6px 12px darkgray;
			border-radius: 6px;
			text-align: center;
			position: absolute;
			left:200px;
			top:50px;
		}
		#addUserInfoDialog div{
			line-height: 60px;
		}
		#addUserInfoDialog input{
			width: 300px;
		}
		#insert{
			background-color: #226699;
		}
		#close{
			background-color: darkgrey;
		}
		a{
			display: inline-block;
			width: 60px;
			height: 40px;
			border-radius: 6px;
			border: 0px;
			color: #FFFFFF;
			line-height: 40px;
			text-decoration: none;
			font-size: 13px;
		}
	</style>
</head>
<body>
<div>
	<div id="search">
		<form action="getUserInfoes" method="get">
			<input placeholder="请输入..." name="username"/>
			<button id="find">查询</button>
			<button id="add" type="button" onclick="addUserInfoMethod()">新增</button>
		</form>

	</div>
	<div>
		<table>
			<thead>
			<tr>
				<th>序号</th>
				<th>用户名</th>
				<th>密码</th>
				<th>家庭住址</th>
				<th>联系方式</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody>
			<c:forEach items="${userinfoes}" var="userinfo" varStatus="status">
				<tr>
					<td>${status.index+1}</td>
					<td>${userinfo.username}</td>
					<td>${userinfo.userpwd}</td>
					<td>${userinfo.useraddress}</td>
					<td>${userinfo.usertel}</td>
					<td>
						<a style="background-color: cadetblue" href="http://localhost:8082/getUserInfoById?id=${userinfo.id}">编辑</a>
						<a style="background-color: orangered" href="http://localhost:8082/deleteUserById?id=${userinfo.id}">删除</a>
						<button style="background-color:darksalmon;width: 85px;height: 40px;" onclick="deleteAjax(${userinfo.id})">ajax删除</button>
					</td>
				</tr>
			</c:forEach>
			</tbody>
		</table>

	</div>
	<div id="addUserInfoDialog">
		<form action="saveUserInfo" method="post">
			<div style="margin-top: 50px;">
				用&nbsp; 户&nbsp; 名<input type="text" name="username" placeholder="请输入用户名" />
			</div>
			<div>
				密&nbsp; &nbsp; &nbsp; 码<input type="text" name="userpwd" placeholder="请输入密码" />
			</div>
			<div>
				家庭住址<input type="text" name="useraddress" placeholder="请输入家庭住址" />
			</div>
			<div>
				联系方式<input type="text" name="usertel" placeholder="请输入联系方式" />
			</div>
			<div>
				<button id="insert">新增</button>
				<button type="button" id="close" style="margin-left:15px" onclick="closeUserInfoMethod()">关闭</button>
			</div>
		</form>
	</div>
</div>
</body>
<script>
	function addUserInfoMethod(){
		var addUserInfoBox=document.getElementById("addUserInfoDialog")
		addUserInfoBox.style.display="block"
	}
	function closeUserInfoMethod(){
		var addUserInfoBox=document.getElementById("addUserInfoDialog")
		addUserInfoBox.style.display="none"
	}
function deleteAjax(userId){
		var ajaxRequest=new XMLHttpRequest();
		ajaxRequest.open("GET","http://localhost:8082/deleteUserByAjax?id="+userId,"true");
		ajaxRequest.send();
		ajaxRequest.onreadystatechange=function (){
			if(ajaxRequest.readyState==4){
				alert("删除成功")
			}
		}

}
</script>
</html>
